<template>
  <c-pop-box>
    <view class="pr c-pay border-radius20 overflow bg-color-white">
      <image class="pa bg-back-w" mode="widthFix" src="/static/images/ui_huoqucishu.png"></image>
      <view style="padding-top:150upx">
        <view class="margin-left27 margin-right27 padding-bottom20">
          <!-- 立即邀请 -->
          <view class="flex margin-bottom12 border-radius10" style="height:104upx;background-color:#EEEEEE">
            <view class="content dis-flex margin-left30 margin-right30">
              <view class="bg-back-w">
                <view class="font-size25 margin-bottom10">邀请新用户参与获得</view>
                <view class="font-size20" style="color:#959595">每邀请一位获得1次机会</view>
              </view>
            </view>
            <view class="right dis-flex margin-right26">
              <button open-type="share" class="dis-flex border-radius" style="width:160upx;height:55upx;background-color:#34AA18">
                <text class="font-size22 line-height color-white">立即邀请</text>
              </button>
            </view>
          </view>
          <!--  充值 -->
          <view v-if="!isIOS" @click="btnPay({value:value})" v-for="(value,index) in list" :key="index" class="flex pr margin-bottom12 border-radius10 overflow" style="height:104upx;background-color:#EEEEEE">
            <image class="pa" style="width:53upx;height:53upx" src="/static/images/ui_huoqucishu_tuijian.png"></image>
            <view class="content dis-flex margin-left30 margin-right30">
              <view class="bg-back-w">
                <view class="font-size25 margin-bottom10">{{value.remark}}</view>
              </view>
            </view>
            <view class="right dis-flex margin-right26">
              <view class="dis-flex border-radius" style="width:160upx;height:55upx;background-color:#F83030">
                <text class="font-size22 line-height color-white">￥{{ $util.formatPrice(value.rechargeMoney) }}</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </c-pop-box>
</template>
<script>
import CPopBox from '@/components/global/c-pop/c-pop-box';
import { requestPayment } from '@/utils/pay';
import { mapActions } from 'vuex';
export default {
  name: 'c-pay',
  props: {
    d: {
      type: Object
    }
  },
  components: {
    CPopBox
  },
  data() {
    return {
      isIOS: '',
      list: []
    };
  },
  watch: {},
  computed: {},
  methods: {
    ...mapActions('user', ['gameInfoUp']),
    async btnPay(obj) {
      const that = this;
      let res = await this.addOrder({
        productId: obj.value.id, // 商品模板Id
        remark: obj.value.remark, // 备注
        status: obj.value.status // 状态
      });
      let resQQpay = await this.qqapplet({
        orderNo: res.orderNo
      });
      requestPayment({
        prepayNo: resQQpay.prepayNo,
        success() {
          that.gameInfoUp();
        }
      });
    },
    async payTemplate() {
      let res = await this.$api.pay.payTemplate();
      this.list = res;
    },
    // 订单号
    async addOrder(obj = {}) {
      let res = await this.$api.pay.addOrder({
        productId: obj.productId, // 商品模板Id
        remark: obj.remark, // 备注
        status: obj.status // 状态
      });
      return res;
    },
    // qq 预支付
    async qqapplet(obj = {}) {
      let res = await this.$api.pay.qqapplet({
        orderNo: obj.orderNo // 商品模板Id
      });
      return res;
    }
  },
  created() {},
  mounted() {
    console.log(2222);
    this.payTemplate();
    this.isIOS = this.$tip.isIOS();
    console.log('this.$tip.isIOS()', this.$tip.isIOS());
  }
};
</script>
<style lang="scss" scoped>
.c-pay {
  width: 604upx;
  min-height: 746upx;
}
</style>
